HTML

Tags: #◇Computer Science #◇CCAPDEV #◇Conceptual #◇HTML

◇Overview

HTML (Hypertext Markup Language) serves as the foundational building block of the Web. It defines the meaning and structure of web content. Unlike programming languages that contain logic and execute instructions, HTML is a markup language used to annotate documents for presentation. This annotation is done using tags that define various elements in the document based on their purpose or importance, which browsers then interpret to display web pages correctly.

◇Key Definitions

• HTML (Hypertext Markup Language): The standard markup language used to create and structure web pages.
• Markup Language: A system for annotating a document in a way that is syntactically distinguishable from the text, primarily focusing on structure and presentation rather than logic.
• Programming Language: A formalized set of instructions used to produce various kinds of output, primarily involving logic execution (e.g., C, Java, Python).
• Tags: Specific keywords surrounded by angle brackets (e.g., <html>) used to create elements in a markup language.

◇Theoretical Framework / Core Concepts

Markup vs. Programming Languages

Understanding the distinction between markup and programming languages is crucial for web development:

• Markup Languages: Focus on the presentation and structuring of documents. They are interpreted directly by the web browser. Examples include HTML, XML, XHTML, and CityGML.
• Programming Languages: Focus on logical operations and instructions. These must be either compiled by a compiler or interpreted by an interpreter before execution. Examples include Java, C++, and Python.

Basic HTML Structure

Every HTML document follows a fundamental structure to ensure proper interpretation by the web browser.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

Core Components:

• <!DOCTYPE html>: The document type declaration that informs the browser this is an HTML5 document.
• <html>: The root element of an HTML page that encapsulates all content.
• <head>: Contains metadata about the document, such as the title and links to stylesheets.
• <body>: Contains the visible page content, like headings, paragraphs, and images.

◇Worked Examples / Protocol Walkthroughs / Calculations

Example: Virtual Keyboards and User Experience

In modern web development, particularly for mobile devices, maximizing available functions enhances user experience. For instance, using specific HTML input types triggers the appropriate virtual keyboard.

<!-- Triggers standard text keyboard -->
<input type="text" name="username">

<!-- Triggers numeric keypad on mobile devices -->
<input type="number" name="age">

<!-- Triggers email keyboard (with '@' symbol) -->
<input type="email" name="user_email">

By simply changing the type attribute, developers can significantly improve the ease of data entry on mobile platforms without complex logic.

◇Summary & Key Takeaways

• HTML is the standard markup language for creating web pages, focusing on document structure rather than logic.
• Markup languages differ fundamentally from programming languages; the former annotates for presentation, while the latter executes logical instructions.
• A standard HTML document starts with the <!DOCTYPE html> declaration and is structured with a root <html> element.
• Proper use of HTML tags and attributes (like input types) directly impacts and enhances user experience, especially on mobile devices.

◇References & Navigation

• Next Topic: ◇CSS
• Related Notes: ◇Client Server Architecture